﻿<!DOCTYPE html>
<html lang="en">
<head th:replace="~{parts/head}">

<!-- page wrapper -->
<body>

    <div class="boxed_wrapper">

        <!-- preloader -->
        <div class="preloader"></div>
        <!-- preloader -->


        <!-- main header -->
        <header class="main-header style-three">

            <!-- header-lower -->
            <div class="header-lower">
                <div class="outer-box clearfix">
                    <div class="left-column">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/logo-3.png" alt=""></a></figure>
                        </div>
                        <div th:replace="~{parts/menu-area}">
                    </div>
                    <div class="right-column pull-right">
                        <div th:replace="~{parts/author-box}">
                    </div>
                </div>
            </div>

            <!--sticky Header-->
            <div class="sticky-header">
                <div class="auto-container">
                    <div class="outer-box">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/small-logo.png" alt=""></a></figure>
                        </div>
                        <div class="menu-area">
                            <nav class="main-menu clearfix">
                                <!--Keep This Empty / Menu will come through Javascript-->
                            </nav>
                        </div>
<!--                        <div class="btn-box"><a href="register-page.html" class="theme-btn-one"><i class="icon-image"></i>Join Now</a></div>-->
                    </div>
                </div>
            </div>
        </header>
        <!-- main-header end -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><i class="fas fa-times"></i></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="/"><img src="../../images/logo-2.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
                <div class="contact-info">
                    <h4>Contact Info</h4>
                    <ul>
                        <li>Chicago 12, Melborne City, USA</li>
                        <li><a href="">+88 01682648101</a></li>
                        <li><a href="mailto:info@example.com">info@example.com</a></li>
                    </ul>
                </div>
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="/"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="/"><span class="fab fa-facebook-square"></span></a></li>
                        <li><a href="/"><span class="fab fa-pinterest-p"></span></a></li>
                        <li><a href="/"><span class="fab fa-instagram"></span></a></li>
                        <li><a href="/"><span class="fab fa-youtube"></span></a></li>
                    </ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->


        <!--page-title-two-->
        <section class="page-title-two">
            <div class="title-box centred bg-color-2">
                <div class="pattern-layer">
                    <div class="pattern-1" style="background-image: url(../../images/shape/shape-70.png);"></div>
                    <div class="pattern-2" style="background-image: url(../../images/shape/shape-71.png);"></div>
                </div>
                <div class="auto-container">
                    <div class="title">
                        <h1>科室信息</h1>
                    </div>
                </div>
            </div>
            <div class="lower-content">
                <ul class="bread-crumb clearfix">
                    <li><a href="/">主页</a></li>
                    <li><a style="cursor: pointer" onclick="window.history.back(-1);">上一页</a></li>
                    <li>科室信息</li>
                </ul>
            </div>
        </section>
        <!--page-title-two end-->


        <!-- doctors-dashboard -->
        <section class="doctors-dashboard bg-color-3">
            <div class="left-panel">
                <div class="profile-box patient-profile">
                    <div class="upper-box">
                        <figure class="profile-image"><img th:src="${admin.icon}" alt=""></figure>
                        <div class="title-box centred">
                            <div class="inner">
                                <h3 th:text="${admin.name}">Dr. Rex Allen</h3>
<!--                                <p><i class="fas fa-calendar-alt"></i>Oct 05, 2083,  38 Years</p>-->
                            </div>
                        </div>
                    </div>
                    <div class="profile-info">
                        <ul class="list clearfix">
                            <th:block th:replace="~{parts/admin-user-dash}"></th:block>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right-panel">
                <div class="content-container">
                    <div class="outer-container">
                        <div class="add-listing my-profile">
                            <form id="info-form">
                            <div class="single-box">
                                <div class="title-box">
                                    <h3>基本信息</h3>
                                </div>
                                <div class="inner-box">
                                    <div class="profile-title">
                                        <figure class="image-box"><img th:src="${clinic.icon}" alt="" id="new-icon"></figure>
                                        <div class="upload-photo">
                                            <input class="d-none" type="file" id="iconFile" name="iconFile" accept="image/jpeg, image/png, image/jpg">
                                            <a style="cursor:pointer;" onclick="$('#iconFile').click()"><i class="icon-Upload"></i>上传头像</a>
                                            <span>支持JPG或GIF，最大为2MB</span>
                                        </div>
                                    </div>
                                    <input class="d-none" id="patId" name="id" type="text" th:value="${clinic.id}">
                                    <div class="row clearfix">
                                        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                            <label><strong>名称</strong></label>
                                            <input type="text" id="name" name="name" placeholder="名称" required="" th:value="${clinic.name}">
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                            <label><strong>电话</strong></label>
                                            <input type="text" id="phone" name="phone" placeholder="手机" required="" th:value="${clinic.phone}">
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                            <label><strong>简介</strong></label>
                                            <textarea id="intro1" name="intro1" placeholder="简介" th:text="${clinic.intro1}"></textarea>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                            <label><strong>说明</strong></label>
                                            <textarea id="intro2" name="intro2" placeholder="说明" th:text="${clinic.intro2}"></textarea>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                            <label><strong>详情</strong></label>
                                            <textarea id="intro3" name="intro3" placeholder="详情" th:text="${clinic.intro3}"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div class="btn-box">
                                    <a th:if="${clinic.name ne null}" style="cursor:pointer;" class="theme-btn-one" onclick="save()">保存修改<i class="icon-Arrow-Right"></i></a>
                                    <a th:if="${clinic.name eq null}" style="cursor:pointer;" class="theme-btn-one" onclick="insert()">新增<i class="icon-Arrow-Right"></i></a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- doctors-dashboard -->


        <!-- main-footer -->
        <div th:replace="~{parts/main-footer}"></div>
        <!-- main-footer end -->

        <div th:replace="~{parts/alert-modal}"></div>
        <!--Scroll to top-->
        <button class="scroll-top scroll-to-target" data-target="html" onclick='location.href=("/message?targetId=6")'>
            <img src="../../images/robot-2.png">
        </button>
    </div>


    <script th:replace="~{parts/js}"></script>
    <script>
        $('#admin-clinic').addClass("current");
        $('#admin_tab').addClass("current");
        function save() {
            let formData = new FormData($("#info-form")[0]);
            $.ajax({
                type: "post",
                url:"/admin-clinic-detail/save",
                cache: false,
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.state === "success") {
                        $('#saveSuccessModal').modal('show');
                    }
                },
                error: function(res) {
                    $('#saveFailModal').modal('show');
                }
            });
        }
        function insert() {
            let formData = new FormData($("#info-form")[0]);
            $.ajax({
                type: "post",
                url:"/admin-clinic-detail/insert",
                cache: false,
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.state === "success") {
                        $('#insertSuccessModal').modal('show');
                    }
                },
                error: function(res) {
                    $('#insertFailModal').modal('show');
                }
            });
        }
        function insertSuccess() {
            window.location.href='/admin-clinic';
        }
        // 上传图片并显示
        var getUserPhoto = document.getElementById("iconFile");
        getUserPhoto.onchange = function ()
        {
            var file = this.files;
            console.log(file);
            var reader = new FileReader();
            reader.readAsDataURL(file[0]);
            reader.onload = function ()
            {
                var image = document.getElementById("new-icon");
                image.src = reader.result;
            };
        };
    </script>
    <style>
        .nice-select {
            position: relative;
            display: block;
            width: 100%;
            height: 50px;
            border-radius: 10px;
            border: solid 1px #e8e8e8 !important;
            background: transparent;
            font-size: 16px;
            color: #848484;
            padding: 4px 24px;
        }
        .nice-select:after {
            top: 10px;
        }
    </style>
</body><!-- End of .page_wrapper -->
</html>
